<template>
	<view class="fydetails">
		<view class="person">
			<view class="person1">
				<text class="text1">姓名：蒋峰</text>
				<text class="text2">性别：女</text>
				<text class="text3">年龄：24岁</text>
			</view>
			<view class="person2">
				报告日期：2020-08-09
			</view>
			<view class="hrs">
				- · - · - · - · - · -
				· - · - · - · - · - ·
				- · - · - · - · -
			</view>
			<view class="person3">
				<text class="text1">合计：</text>
				<text class="text2">￥450.00</text>
			</view>
		</view>
		<view class="drug">
			<view class="detail">费用明细</view>
			<view class="cutOffRule"></view>
			<view class="DrugPrice">
				<view class="DrugPriceL">
					<view class="drugName">普罗布考片</view>
					<view class="unitPrice">
						<text class="text1">单价：￥50.00</text>
						<text class="text2">数量：3</text>
					</view>
				</view>
				<view class="DrugPriceR">￥150.00</view>
			</view>
			<view class="cutOffRule"></view>
		</view>
	</view>
</template>

<script>

</script>

<style lang="scss">
	.cutOffRule {
		border: 1px solid #f2f2f2;
		margin: 0 20rpx;
	}

	body,
	html {
		background-color: #fdfeff;
	}

	.fydetails {
		margin: 0 36rpx;
		margin-top: 50rpx;

		.person {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 250rpx;
			background-color: #f5f9ff;

			.hrs {
				margin: 0rpx 20rpx;
				color: #aaaaaa;
			}

			.person1 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.text1 {
					margin-left: 20rpx;
					font-weight: lighter;

				}

				.text2 {
					font-weight: lighter;
				}

				.text3 {
					margin-right: 20rpx;
					font-weight: lighter;
				}

			}

			.person2 {
				color: #aaaaaa;
				font-size: 20rpx;
				margin-left: 20rpx;
			}

			.person3 {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;

				.text1 {
					font-size: 20rpx;
				}

				.text2 {
					color: #f46363;
					font-size: 30rpx;
					margin-right: 20rpx;
				}
			}
		}

		.drug {
			margin-top: 36rpx;
			background-color: #fff;
			border: 1px solid #f2f2f2;

			.detail {
				color: #aaaaaa;
				height: 80rpx;
				line-height: 80rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
			}

			.DrugPrice {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;

				.DrugPriceL {
					margin-left: 20rpx;
				}

				.DrugPriceR {
					margin-right: 20rpx;

				}

				.drugName {
					margin-bottom: 10rpx;
				}

				.unitPrice {
					.text1 {
						font-size: 20rpx;
						color: #aaaaaa;
					}

					.text2 {
						font-size: 20rpx;
						color: #aaaaaa;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>
